<template>
  <div class="asilde">
    <div class="a-main">
      <ul class="a-u-main">
        <li
          v-for="(item, index) in mainMenuList"
          :key="item.id"
          @click="loadDetail($event, item.id, index)"
          :class="{ cssMainIsActive: index == cssMainIsActive }"
        >
          <i :class="item.icon"></i> {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="a-detail">
      <ul class="a-u-detail">
        <li class="a-ul-broad">
          <i class="el-icon"></i> {{ detailTitle }}管理
        </li>
        <li v-for="item in detailMenuList" :key="item.id">
          <router-link :to="item.url"
            ><i :class="item.icon"></i> {{ item.name }}</router-link
          >
        </li>
      </ul>
    </div>
  </div>
</template>


<script>
let _menu = require("@/assets/json/menu.json");
export default {
  name: "aslide",
  data() {
    return {
      menuList: [],
      mainMenuList: [],
      detailMenuList: [],
      detailTitle: "",
      cssMainIsActive: false,
    };
  },
  methods: {
    initData() {
      this.menuList = _menu;
    },
    loadDetail: function (e, pid, index) {
      let that = this;
      console.log(index);
      that.detailTitle = that.menuList.filter((p) => p.id == pid)[0].name;
      that.detailMenuList = that.menuList.filter((p) => p.pid == pid);
      that.cssMainIsActive = index;
    },
    routeDetail: function () {},
  },
  created() {
    let that = this;
    //this.initData()
    that.menuList = _menu.menus;
    that.mainMenuList = that.menuList.filter((p) => p.pid == "0");
  },
};
</script>

<style scoped>
.asilde {
  width: 240px;
  background-color: #eaedf1;
  height: calc(100% - 62px);
  float: left;
  margin-left: -340px;
}

.a-main {
  height: 100%;
  width: 100px;
  float: left;
  background-color: #464c5b;
  color: white;
}

ul {
  margin-block-start: 0em;
  margin-block-end: 0em;
  padding-top: 20px;
}
ul,
li {
  list-style: none;
  padding: 0;
}

li {
  padding: 15px 0;
  cursor: pointer;
}

li a {
  text-decoration: none;
  color: rgb(83, 78, 78);
}

li:hover {
  background-color: rgb(190, 190, 186);
}

.a-ul-broad {
  background-color: #f2f2f2;
  cursor: default;
}
.cssMainIsActive {
  background-color: silver;
}
</style>